<template>
	<view class="profile-page">
		<!-- 头像和昵称区域 -->
		<image class="avatar" :src="avatarUrl" @click="handlePreview"></image>
		<input class="nickname-input" v-model="nickname" placeholder="请输入昵称" />

		<!-- 核心功能按钮区 -->
		<view class="action-group">
			<!-- 1. 获取头像按钮 -->
			<button class="action-btn" size="mini" type="default" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">更新头像</button>

			<!-- 2. 获取手机号按钮 -->
			<button class="action-btn" size="mini" type="default" plain="true" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">绑定手机号</button>

			<!-- 3. 打开授权设置 -->
			<button class="action-btn" size="mini" type="warn" plain="true" open-type="openSetting" @opensetting="onOpenSetting">授权设置</button>
		</view>

		<!-- 4. 隐私协议授权按钮 (非常重要!) -->
		<button v-if="needsPrivacyAuth" type="primary" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacy">阅读并同意《隐私保护协议》</button>

		<!-- 5. 保存按钮，展示多种状态 -->
		<button class="save-btn" type="primary" :loading="isSaving" :disabled="isSaving || !isFormDirty" hover-class="button-hover-effect" @click="saveProfile">
			{{ isSaving ? '保存中...' : '保存修改' }}
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			avatarUrl: '/static/default-avatar.png',
			nickname: '',
			isSaving: false,
			isFormDirty: false, // 表单是否被修改过
			needsPrivacyAuth: true // 是否需要用户同意隐私协议
		};
	},
	watch: {
		// 监听表单变化，用于控制保存按钮状态
		nickname() {
			this.isFormDirty = true;
		},
		avatarUrl() {
			this.isFormDirty = true;
		}
	},
	methods: {
		// 1. 更新头像的回调
		onChooseAvatar(e) {
			console.log('选择的头像临时路径:', e.detail.avatarUrl);
			// 在这里，你可以将 e.detail.avatarUrl 上传到你的服务器
			this.avatarUrl = e.detail.avatarUrl; // 先在本地预览
		},
		// 2. 获取手机号的回调
		onGetPhoneNumber(e) {
			if (e.detail.code) {
				console.log('获取手机号的动态令牌(code):', e.detail.code);
				// 你需要把这个 code 发送到你的后端，后端再去换取真实手机号
			} else {
				uni.showToast({ title: '您已拒绝授权', icon: 'none' });
			}
		},
		// 3. 打开授权设置页后的回调
		onOpenSetting(e) {
			console.log('授权设置结果:', e.detail.authSetting);
			// 用户可能在这里重新开启了某个权限，可以根据情况刷新页面状态
		},
		// 4. 用户同意隐私协议
		handleAgreePrivacy() {
			console.log('用户已同意隐私协议');
			this.needsPrivacyAuth = false;
			// 此时，之前被限制的API（如getPhoneNumber）可以正常调用了
		},
		// 5. 保存修改的逻辑
		saveProfile() {
			this.isSaving = true; // 进入 loading 状态，同时按钮被 disabled
			console.log('开始保存...', { avatar: this.avatarUrl, nickname: this.nickname });
			setTimeout(() => {
				// 模拟网络请求
				this.isSaving = false; // 保存完成，解除 loading 和 disabled
				this.isFormDirty = false; // 表单回归原始状态
				uni.showToast({ title: '保存成功！' });
			}, 1500);
		}
	}
};
</script>

<style>
.button-hover-effect {
	/* 自定义点击态 */
	opacity: 0.7;
	transform: scale(0.98);
}
/* ... 其他页面布局样式 ... */
</style>
